<!doctype html>
<head>
  <link rel=stylesheet href="../node_modules/codemirror/lib/codemirror.css">
  <link rel="stylesheet" href="../node_modules/codemirror/addon/hint/show-hint.css">
  <link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
  <link rel="stylesheet" href="../node_modules/codemirror/addon/tern/tern.css">
  <meta charset="utf-8">
  <link rel=stylesheet href="docs.css">
  <link rel=stylesheet href="demo/demo.css">
  <title>Tern Demo</title>
</head>
<body>
  <!-- load all the junk required for the demo -->
  <script src="../node_modules/codemirror/lib/codemirror.js"></script>
  <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
  <script src="../node_modules/codemirror/addon/hint/show-hint.js"></script>
  <script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
  <script src="../node_modules/codemirror/addon/tern/tern.js"></script>
  <script src="demo/polyfill.js"></script>
  <script src="../node_modules/codemirror/addon/search/searchcursor.js"></script>
  <script src="../node_modules/codemirror/addon/search/search.js"></script>
  <script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
  <script src="../node_modules/acorn/acorn.js"></script>
  <script src="../node_modules/acorn/acorn_loose.js"></script>
  <script src="../node_modules/acorn/util/walk.js"></script>
  <script src="../lib/signal.js"></script>
  <script src="../lib/tern.js"></script>
  <script src="../lib/def.js"></script>
  <script src="../lib/comment.js"></script>
  <script src="../lib/infer.js"></script>
  <script src="demo/demo.js"></script>
  <script src="../plugin/requirejs.js"></script>
  <script src="../plugin/doc_comment.js"></script>


<div id=top>
  <div id=head>
    <a href="http://ternjs.net" class=title>Tern: <span class=subtitle>Intelligent JavaScript tooling</span>
    </a><a href="demo.html">Demo
    </a><a href="manual.html">Docs
    </a><a href="https://github.com/marijnh/tern">Code</a>
  </div>
</div>

<h1>Tern demo</h1>

<p>This editor is hooked up to Tern. The drop-down in the top right
corner lists the commands and keyboard shortcuts available. Output and
function argument hints will appear in the bar below the editor.</p>

<div style="position: relative" id="demospace">
  <select id="commands">
    <option>commands...</option>
    <option value=complete>Autocomplete (ctrl-space)</option>
    <option value=jumptodef>Jump to definition (alt-.)</option>
    <option value=findtype>Find type of (ctrl-i)</option>
    <option value=rename>Rename variable (ctrl-q)</option>
    <option value=addfile>Add a new file</option>
    <option value=delfile>Remove this file</option>
  </select>
  <form>
    <ul class="tabs" id="docs"></ul>
    <textarea id=code name=code>
// Use ctrl-space to complete something
co
document.body.a

// Put the cursor in or after an expression, press ctrl-i to
// find its type

var foo = ["array", "of", "strings"];
var bar = foo.slice(0, 2).join("").split("a")[0];

// Works for locally defined types too.

function CTor() { this.size = 10; }
CTor.prototype.hallo = "hallo";

var baz = new CTor;
baz.

// You can press ctrl-q when the cursor is on a variable name to
// rename it. Try it with CTor...

// When the cursor is in an argument list, the arguments are
// shown below the editor.

[1].reduce(  );

// And a little more advanced code...

(function(exports) {
  exports.randomElt = function(arr) {
    return arr[Math.floor(arr.length * Math.random())];
  };
  exports.strList = "foo".split("");
  exports.intList = exports.strList.map(function(s) { return s.charCodeAt(0); });
})(window.myMod = {});

var randomStr = myMod.randomElt(myMod.strList);
var randomInt = myMod.randomElt(myMod.intList);

// A test of the requirejs plug-in. Check the 'test_dep.js' tab,
// notice that the test variable.

requirejs(["test_dep.js"], function(test) {
  var word = test.capitalize(test.garble("coconut"));
  console.log(word);
});
</textarea></form></div>

<pre style="display: none" id="requirejs_test_dep">define(function() {
  return {
    capitalize: function(word) {
      return word.charAt(0).toUpperCase() + word.slice(1);
    },
    garble: function(word) {
      return word.replace(/[auiyoe]/g, function() {
        return "auiyoe".charAt(Math.floor(Math.random() * 6));
      });
    }
  };
});</pre>

</body>
